<template>
  <div class="main-page">
    <search-header></search-header>
    <img-swiper :imgList="imgList"></img-swiper>
    <icon-swiper :iconList="iconList"></icon-swiper>
    <ul class="selectList"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
    >
      <li v-for="item in dataList" @click="goDetails(item)">
        <img class="product-img" :src="item.mainImage" alt=""/>
        <div class="sub-title">
          <div class="title">
            <p class="txt">{{item.name}}</p>
            <p class="num">
              <img src="@/assets/images/icon/101.png" alt=""/>
              {{item.collection}}
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import SearchHeader from "../../components/header/searchHeader";
  import IconSwiper from "../../components/iconSwiper/iconSwiper";
  import ImgSwiper from "../../components/imgSwiper/imgSwiper";

  export default {
    name: "main-page",
    data() {
      return {
        imgList: [
          {
            id: 0,
            img: 'http://img2.imgtn.bdimg.com/it/u=230680961,3560343465&fm=26&gp=0.jpg'
          },
          {
            id: 1,
            img: 'http://img4.imgtn.bdimg.com/it/u=384902245,1488067023&fm=11&gp=0.jpg'
          }
        ],
        iconList: [
          {
            id: 1,
            name: '蔬菜',
            icon: './static/images/icon/0101.png'
          },
          {
            id: 2,
            name: '干果',
            icon: './static/images/icon/0102.png'
          },
          {
            id: 3,
            name: '肉类蛋类',
            icon: './static/images/icon/0103.png'
          },
          {
            id: 4,
            name: '特色小吃',
            icon: './static/images/icon/0104.png'
          },
          {
            id: 5,
            name: '杂粮',
            icon: './static/images/icon/0105.png'
          },
          {
            id: 6,
            name: '山珍',
            icon: './static/images/icon/0106.png'
          },
          {
            id: 7,
            name: '休闲食品',
            icon: './static/images/icon/0107.png'
          },
          {
            id: 8,
            name: '山珍',
            icon: './static/images/icon/0106.png'
          },
          {
            id: 9,
            name: '休闲食品',
            icon: './static/images/icon/0107.png'
          },
          {
            id: 10,
            name: '更多',
            icon: './static/images/icon/0108.png'
          }
        ],
        dataList: [
          {
            id: 100000121,
            categoryId: 14000,
            name: "爱睡懒觉倒海翻江阿斯达",
            subtitle: "阿拉斯加侃大山",
            mainImage: 'http://img3.imgtn.bdimg.com/it/u=1615747684,735540779&fm=26&gp=0.jpg',
            bannerList: [
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986512144&di=1ca08b2fe057e5d8089378ade12d834c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb21bb051f8198618b4505a5040ed2e738ad4e6cb.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986535010&di=90a058f57ee38f6eb6b0c1c4a51b88e6&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F82%2Fd%2F158.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986555649&di=27e682896da8fcf60043c975ceef102a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F14%2F49%2F08G58PIC2Hy_1024.jpg'
            ],
            price: 1.5,
            adminName: "河南的老乡",
            status: 1,
            collection: 3,
            createTime: 1508661016000,
            updateTime: 1519785771000,
            adminId: 101,
            avatar: "http://59.110.136.67:8080/dwshop/upload/3139122f-4862-4b54-b33c-58d0f10955fc.JPG"
          },
          {
            id: 100000122,
            categoryId: 14000,
            name: "麟凤龟龙时代峻峰",
            subtitle: "自然生长，不套袋，不打蜡，当天摘当天发",
            mainImage: 'http://img5.imgtn.bdimg.com/it/u=2807537560,355918843&fm=26&gp=0.jpg',
            bannerList: [
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986512144&di=1ca08b2fe057e5d8089378ade12d834c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb21bb051f8198618b4505a5040ed2e738ad4e6cb.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986535010&di=90a058f57ee38f6eb6b0c1c4a51b88e6&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F82%2Fd%2F158.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986555649&di=27e682896da8fcf60043c975ceef102a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F14%2F49%2F08G58PIC2Hy_1024.jpg'
            ],
            price: 33,
            adminName: "大大大鸭梨",
            status: 1,
            collection: 3,
            createTime: 1508661016000,
            updateTime: 1519785771000,
            adminId: 102,
            avatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986157362&di=f235a84e57fccb95b36e36e05b8b6ea6&imgtype=0&src=http%3A%2F%2Fww4.sinaimg.cn%2Fthumb180%2F862dc77cly1fm4snr045dj20j60j5wfe.jpg"
          },
          {
            id: 100000123,
            categoryId: 14000,
            name: "蓝色大海水电费",
            subtitle: "自然生长，不套袋，不打蜡，当天摘当天发",
            mainImage: 'http://img0.imgtn.bdimg.com/it/u=1910270036,39054688&fm=11&gp=0.jpg',
            bannerList: [
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986512144&di=1ca08b2fe057e5d8089378ade12d834c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb21bb051f8198618b4505a5040ed2e738ad4e6cb.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986535010&di=90a058f57ee38f6eb6b0c1c4a51b88e6&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F82%2Fd%2F158.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986555649&di=27e682896da8fcf60043c975ceef102a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F14%2F49%2F08G58PIC2Hy_1024.jpg'
            ],
            price: 45.2,
            adminName: "阿斯顿加快速度",
            status: 1,
            collection: 3,
            createTime: 1508661016000,
            updateTime: 1519785771000,
            adminId: 103,
            avatar: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986239504&di=08e3d131601d4faa0488e9be5a82f76f&imgtype=0&src=http%3A%2F%2Fimg1.2345.com%2Fduoteimg%2FqqTxImg%2F2%2F4d9488012aefe59c5ae4fd4a760ee37d.jpg"
          },
          {
            id: 100000124,
            categoryId: 14000,
            name: "人口剪短发你的积分",
            subtitle: "自然生长，不套袋，不打蜡，当天摘当天发",
            mainImage: 'http://img4.imgtn.bdimg.com/it/u=3744355361,101457869&fm=26&gp=0.jpg',
            bannerList: [
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986512144&di=1ca08b2fe057e5d8089378ade12d834c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb21bb051f8198618b4505a5040ed2e738ad4e6cb.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986535010&di=90a058f57ee38f6eb6b0c1c4a51b88e6&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F82%2Fd%2F158.jpg',
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986555649&di=27e682896da8fcf60043c975ceef102a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F14%2F49%2F08G58PIC2Hy_1024.jpg'
            ],
            price: 60,
            adminName: "快递师傅",
            status: 1,
            collection: 3,
            createTime: 1508661016000,
            updateTime: 1519785771000,
            adminId: 104,
            avatar: "http://h.hiphotos.baidu.com/image/pic/item/4b90f603738da977eefc9700bc51f8198718e3ce.jpg"
          }
        ]
      }
    },
    methods: {
      loadMore() {
        this.loading = true;
        setTimeout(() => {
          let last = this.dataList.length - 1;
          for (let i = last; i <= last + 4; i++) {
            this.dataList.push(
              {
                id: 100000122,
                categoryId: 14000,
                name: "昭通红富士苹果0000" + i,
                subtitle: "自然生长，不套袋，不打蜡，当天摘当天发",
                mainImage: "http://59.110.136.67:8080/dwshop/upload/admproductimg/64eb419d-0221-4c15-8048-b6ff664ebc49.jpg",
                bannerList: [
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986512144&di=1ca08b2fe057e5d8089378ade12d834c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb21bb051f8198618b4505a5040ed2e738ad4e6cb.jpg',
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986535010&di=90a058f57ee38f6eb6b0c1c4a51b88e6&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F82%2Fd%2F158.jpg',
                  'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519986555649&di=27e682896da8fcf60043c975ceef102a&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F14%2F49%2F08G58PIC2Hy_1024.jpg'
                ],
                price: 60,
                adminName: "13308703309",
                status: 1,
                collection: 3,
                createTime: 1508661016000,
                updateTime: 1519785771000,
                adminId: 104,
                avatar: "http://59.110.136.67:8080/dwshop/upload/3139122f-4862-4b54-b33c-58d0f10955fc.JPG"
              }
            );
          }
          this.loading = false;
        }, 1500);
      },
      goDetails(item) {
        this.$router.push({path: '/detail', query: {id: item.id}})
      }
    },
    components: {ImgSwiper, IconSwiper, SearchHeader}
  }
</script>

<style scoped lang="less">
  .main-page {
    .selectList {
      li {
        margin-bottom: 5px;
        position: relative;
        height: 180px;
        width: 100%;
        .product-img {
          width: 100%;
          height: 100%;
        }
        .sub-title {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          font-weight: bolder;
          color: white;
          background: darkturquoise;
          .title {
            width: 90%;
            margin: auto;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .num {
              display: flex;
              align-items: center;
              img {
                width: 16px;
                height: 16px;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
</style>
